<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Management System</title>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@5.1.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.6.8/css/layui.css" media="all">
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://www.layuicdn.com/layui-v2.6.8/layui.js"></script>
</head>
<body>
<div id="app" class="container my-5">
    <login v-if="!authenticated" @authenticated="authenticated = true"></login>
    <div v-else>
        <dashboard @logout="authenticated = false"></dashboard>
    </div>
</div>

<script>
    Vue.component('login', {
        template: `
        <div class="login-page">
          <el-form :model="loginForm" @submit.native.prevent="onSubmit">
            <el-form-item label="Username">
              <el-input v-model="loginForm.username" autoComplete="off"></el-input>
            </el-form-item>
            <el-form-item label="Password">
              <el-input type="password" v-model="loginForm.password" autoComplete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">Login</el-button>
            </el-form-item>
          </el-form>
        </div>
      `,
        data() {
            return {
                loginForm: {
                    username: '',
                    password: ''
                }
            };
        },
        methods: {
            onSubmit() {
                const userData = {username: this.loginForm.username, password: this.loginForm.password};
                if (userData.username === '123' && userData.password === '123') {
                    this.$emit('authenticated');
                } else {
                    this.$message.error('Invalid username or password');
                }
            }
        }
    });

    Vue.component('dashboard', {
        template: `
        <div class="dashboard">
          <h2>Dashboard</h2>
          <el-button type="primary" @click="logout">Logout</el-button>
          <user-management></user-management>
        </div>
      `,
        methods: {
            logout() {
                this.$emit('logout');
            }
        }
    });

    Vue.component('user-management', {
        template: `
        <div class="user-management">
          <el-button type="primary" @click="showCreateUserDialog">Create User</el-button>
          <el-table :data="users">
            <el-table-column prop="id" label="ID"></el-table-column>
            <el-table-column prop="username" label="Username"></el-table-column>
            <el-table-column prop="role" label="Role"></el-table-column>
            <el-table-column label="Actions">
              <template slot-scope="scope">
                <el-button size="mini" @click="showEditUserDialog(scope.row)">Edit</el-button>
                <el-button size="mini" type="danger" @click="deleteUser(scope.row.id)">Delete</el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-dialog title="User Form" :visible.sync="formDialogVisible">
            <el-form :model="currentUser">
              <el-form-item label="Username">
                <el-input v-model="currentUser.username"></el-input>
              </el-form-item>
              <el-form-item label="Role">
                <el-input v-model="currentUser.role"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="formDialogVisible = false">Cancel</el-button>
              <el-button type="primary" @click="saveUser">Save</el-button>
            </div>
          </el-dialog>
        </div>
      `,
        data() {
            return {
                users: [
                    { id: 1, username: '123', role: 'Admin' },
                    { id: 2, username: 'john_doe', role: 'User' }
                ],
                formDialogVisible: false,
                currentUser: {
                    username: '',
                    role: ''
                }
            };
        },
        methods: {
            showCreateUserDialog() {
                this.currentUser = { username: '', role: '' };
                this.formDialogVisible = true;
            },
            showEditUserDialog(user) {
                this.currentUser = Object.assign({}, user);
                this.formDialogVisible = true;
            },
            saveUser() {
                if (!this.currentUser.id) {
                    this.currentUser.id = this.users.length + 1;
                    this.users.push(this.currentUser);
                } else {
                    const index = this.users.findIndex(u => u.id === this.currentUser.id);
                    if (index !== -1) {
                        this.users.splice(index, 1, this.currentUser);
                    }
                }
                this.formDialogVisible = false;
            },
            deleteUser(id) {
                this.users = this.users.filter(u => u.id !== id);
            }
        }
    });

    new Vue({
        el: '#app',
        data: {
            authenticated: false
        }
    });
</script>
</body>
</html>
